<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
	================================================== -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HIDEO HTML5, CSS3, responsive, Bootstrap 3 website
	template</title>
<link rel="stylesheet" type="text/css" href="custom/css/chart.css">

</head>
<body class="header1 activateAppearAnimation">
	<!-- Primary Page Layout 
	================================================== -->
	<!-- globalWrapper -->
	<div id="globalWrapper">
		<jsp:include page="core/template/HEADER_LOGIN.jsp"></jsp:include>
		<header class="page-header">
			<div class="container">
				<div class="row">
					<div class="col-sm-6">
						<h1>Assign Job</h1>
					</div>

				</div>
			</div>
		</header>
		<div class="container">
			<div class="row mt15">

				<!-- Left Menu -->
				<div class="col-md-2">
					<div class="row mb15">
						<div class="col-md-12" align="center">
							<img
								src="http://www.localcrimenews.com/wp-content/uploads/2013/07/default-user-icon-profile.png"
								alt="" class="img-circle img-responsive">
						</div>
						<div class="text-center col-md-12 mb05">
							<h3>วิชาญ ชัยจำรัส</h3>
						</div>
						<div class="col-md-12" align="center">
							<button class="btn btn-success btn-block ">
								<div>
									<span class="font3"> ดูโปรไฟล์ฉัน </span>
								</div>
							</button>
						</div>
					</div>
					<ul class="nav nav-pills nav-stacked">
						<li class="active borderli"><a href="#newsTab"
							data-toggle="tab"><i class="icon-rss-squared"></i>
								ข่าวสารอัพเดท</a></li>
						<li class="borderli"><a href="#JobTab" data-toggle="tab"><i
								class="icon-briefcase"></i> งานของฉัน</a></li>
						<li class="borderli"><a href="#activityTab" data-toggle="tab"><i
								class="icon-award"></i> กิจกรรมของฉัน</a></li>

						<li class="borderli"><a href="#accountTab" data-toggle="tab"><i
								class="icon-credit-card"></i> บัญชีการเงินของฉัน</a></li>
						<li class="borderli"><a href="#inviteTab" data-toggle="tab"><i
								class="icon-users"></i> เชิญเพื่อน</a></li>
					</ul>
				</div>
				<!-- End Left Menu -->

				<!-- Content -->
				<div class="col-md-10 mb15">
					<div class="tab-content  color0 ctaBox">
						<div class="tab-pane fade in active" id="newsTab">
							<div class="row mb15">
								<div class="col-md-12">
									<h2>ข่าวสารอัพเดท</h2>
								</div>
							</div>
							<div class="row">
								<div class="col-md-9">
									<div class="boxFocus color0" style="min-height: 392px;">
										<div>
											<i class="icon-rss-1"></i> <b>ความเคลื่อนไหวของคนที่ฉันติดตาม</b>
										</div>

										<div class="media">
											<a class="pull-left" href="#"> <img class="media-object"
												data-src="holder.js/64x64" alt="64x64"
												src=""
												style="width: 41px; height: 41px;">
											</a>
											<div class="media-body">Cras sit amet nibh libero, in
												gravida nulla. Nulla vel metus scelerisque ante sollicitudin
												commodo. Cras purus odio, vestibulum in vulputate at, tempus
												viverra turpis. Fusce</div>
										</div>
										<div class="media">
											<a class="pull-left" href="#"> <img class="media-object"
												data-src="holder.js/64x64" alt="64x64"
												src=""
												style="width: 41px; height: 41px;">
											</a>
											<div class="media-body">Cras sit amet nibh libero, in
												gravida nulla. Nulla vel metus scelerisque ante sollicitudin
												commodo. Cras purus odio, vestibulum in vulputate at, tempus
												viverra turpis. Fusce</div>
										</div>
										<div class="media">
											<a class="pull-left" href="#"> <img class="media-object"
												data-src="holder.js/64x64" alt="64x64"
												src=""
												style="width: 41px; height: 41px;">
											</a>
											<div class="media-body">Cras sit amet nibh libero, in
												gravida nulla. Nulla vel metus scelerisque ante sollicitudin
												commodo. Cras purus odio, vestibulum in vulputate at, tempus
												viverra turpis. Fusce</div>
										</div>
										<div class="media">
											<a class="pull-left" href="#"> <img class="media-object"
												data-src="holder.js/64x64" alt="64x64"
												src=""
												style="width: 41px; height: 41px;">
											</a>
											<div class="media-body">Cras sit amet nibh libero, in
												gravida nulla. Nulla vel metus scelerisque ante sollicitudin
												commodo. Cras purus odio, vestibulum in vulputate at, tempus
												viverra turpis. Fusce</div>
										</div>
										<div class="media">
											<a class="pull-left" href="#"> <img class="media-object"
												data-src="holder.js/64x64" alt="64x64"
												src=""
												style="width: 41px; height: 41px;">
											</a>
											<div class="media-body">
												<p>
													Cras sit amet nibh libero, in gravida nulla. Nulla vel
													metus scelerisque ante sollicitudin commodo. Cras purus
													odio, vestibulum in vulputate at,<a href="#">เพิ่มเติม</a>
												</p>
											</div>
										</div>
									</div>

								</div>
								<div class="col-md-3">
									<div class="boxFocus color1 text-center mb05">
										<p>
											<b>ระดับความสามารถ</b>
										</p>
										<div class="processComment progress">
											<div
												class="progress-bar progress-bar-info progress-bar-striped"
												role="progressbar" aria-valuenow="60" aria-valuemin="0"
												aria-valuemax="100" style="width: 60%;"></div>
										</div>
										<div>ระดับ 2 (53 xp / 100 xp)</div>
										<button class="btn btn-success btn-block mt05">
											<div>
												<i class=""></i><span class="font3"> เพิ่มระดับ </span>
											</div>
										</button>
									</div>
									<div class="boxFocus color1 text-center">
										<center>
											<div class=" emphasis">
												<p class="fontHeader3">
													<i class="icon-user-1 fontHeader3"></i> 20,700 คน
												</p>
												<button class="btn btn-success btn-block ">
													<div>
														<i class=""></i><span class="font3"> คนที่ฉันติดตาม
														</span>
													</div>
												</button>
											</div>
											<div class=" emphasis mt15">
												<p class="fontHeader3">
													<i class="icon-users fontHeader3"></i> 20,700 คน
												</p>
												<button class="btn btn-success btn-block ">
													<div>
														<span class="font3"> ผู้ติดตามฉัน </span>
													</div>
												</button>
											</div>
										</center>
									</div>
								</div>
								<div class="col-md-12 mt15">
									<div class="boxFocus color0">
										<div class="row">
											<div class="col-md-12">
												<p>
													<i class="icon-flag-checkered"></i> <b>กิจกรรมของฉัน</b>
												</p>
											</div>
											<div>
												<div class="col-md-4">
													<div class="media">
														<a class="pull-left" href="#"> <img
															class="media-object" data-src="holder.js/64x64"
															alt="64x64"
															src=""
															style="width: 41px; height: 41px;">
														</a>
														<div class="media-body">Cras sit amet nibh libero,
															in gravida nulla. Nulla vel metus</div>
													</div>
												</div>
												<div class="col-md-4">
													<div class="media">
														<a class="pull-left" href="#"> <img
															class="media-object" data-src="holder.js/64x64"
															alt="64x64"
															src=""
															style="width: 41px; height: 41px;">
														</a>
														<div class="media-body">Cras sit amet nibh libero,
															in gravida nulla. Nulla vel metus</div>
													</div>
												</div>
												<div class="col-md-4">
													<div class="media">
														<a class="pull-left" href="#"> <img
															class="media-object" data-src="holder.js/64x64"
															alt="64x64"
															src=""
															style="width: 41px; height: 41px;">
														</a>
														<div class="media-body">Cras sit amet nibh libero,
															in gravida nulla. Nulla vel metus</div>
													</div>
												</div>
											</div>
											<div>
												<div class="col-md-4">
													<div class="media">
														<a class="pull-left" href="#"> <img
															class="media-object" data-src="holder.js/64x64"
															alt="64x64"
															src=""
															style="width: 41px; height: 41px;">
														</a>
														<div class="media-body">Cras sit amet nibh libero,
															in gravida nulla. Nulla vel metus</div>
													</div>
												</div>
												<div class="col-md-4">
													<div class="media">
														<a class="pull-left" href="#"> <img
															class="media-object" data-src="holder.js/64x64"
															alt="64x64"
															src=""
															style="width: 41px; height: 41px;">
														</a>
														<div class="media-body">Cras sit amet nibh libero,
															in gravida nulla. Nulla vel metus</div>
													</div>
												</div>
												<div class="col-md-4">
													<div class="media">
														<a class="pull-left" href="#"> <img
															class="media-object" data-src="holder.js/64x64"
															alt="64x64"
															src=""
															style="width: 41px; height: 41px;">
														</a>
														<div class="media-body">Cras sit amet nibh libero,
															in gravida nulla. Nulla vel metus</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="col-md-12 mt15">

									<div class="boxFocus color0">

										<div>
											<p>
												<i class=" icon-doc-text-inv"></i> <b>อัพเดทงานใหม่ที่น่าสนใจ</b>
											</p>
										</div>
										<table class="table table-striped table-hover">

											<thead>
												<tr>
													<th>ชื่องาน</th>
													<th align="center">ความสามารถ</th>
													<th>จำนวนผู้ประมูล</th>
													<th>ราคางาน</th>
													<th>วันที่โพส</th>


												</tr>
											</thead>
											<tbody>
												<tr>
													<td><a href="#"><small>หา Freelance ทำระบบ
																e-comfdfddmerce...</small></a></td>
													<td><small>PHP, Java, Mobile Phone, Software
															Architecture,</small></td>
													<td align="center"><small></small>3</td>
													<td><small>4,000 - 8,000</small></td>
													<td><small>30 ก.ค. 14</small></td>
												</tr>
												<tr>
													<td><a href="#"><small>หา Freelance ทำระบบ
																e-comfdfddmerce...</small></a></td>
													<td><small>PHP, Java, Mobile Phone, Software
															Architecture,</small></td>
													<td align="center"><small></small>3</td>
													<td><small>4,000 - 8,000</small></td>
													<td><small>30 ก.ค. 14</small></td>
												</tr>
												<tr>
													<td><a href="#"><small>หา Freelance ทำระบบ
																e-comfdfddmerce...</small></a></td>
													<td><small>PHP, Java, Mobile Phone, Software
															Architecture,</small></td>
													<td align="center"><small></small>3</td>
													<td><small>4,000 - 8,000</small></td>
													<td><small>30 ก.ค. 14</small></td>
												</tr>
												<tr>
													<td><a href="#"><small>หา Freelance ทำระบบ
																e-comfdfddmerce...</small></a></td>
													<td><small>PHP, Java, Mobile Phone, Software
															Architecture,</small></td>
													<td align="center"><small></small>3</td>
													<td><small>4,000 - 8,000</small></td>
													<td><small>30 ก.ค. 14</small></td>
												</tr>
												<tr>
													<td><a href="#"><small>หา Freelance ทำระบบ
																e-comfdfddmerce...</small></a></td>
													<td><small>PHP, Java, Mobile Phone, Software
															Architecture,</small></td>
													<td align="center"><small></small>3</td>
													<td><small>4,000 - 8,000</small></td>
													<td><small>30 ก.ค. 14</small></td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
								<div class="col-md-12 mt15">
									<div class="boxFocus color0">
										<div class="row">
											<div class="col-md-12 mb05">
												<i class=" icon-inbox"></i> <b>งานทั้งหมดของฉัน</b>
											</div>
											<div class="col-md-12">
												<ul class="nav nav-tabs" id="myTab">
													<li class="active"><a href="#taskSuccessTab"
														data-toggle="tab">งานที่ทำการร้องขอ <span
															class="badge">42</span>
													</a></li>
													<li class=""><a href="#taskPendingTab"
														data-toggle="tab">งานที่กำลังดำเนินการ <span
															class="badge">42</span>
													</a></li>
												</ul>

												<div class="tab-content">
													<!-- tab 1 -->
													<div class="tab-pane fade active in" id="taskSuccessTab">
														<div class="row">
															<div class="col-md-12">
																<div class="table-responsive">
																	<table class="table table-bordered">
																		<thead>
																			<tr>
																				<th style="width: 5px;">ลำดับ</th>
																				<th>ชื่องาน</th>
																				<th style="width: 95px;">วัน/เดือน/ปี</th>
																			</tr>
																		</thead>
																		<tbody>
																			<tr>
																				<td>1</td>
																				<td>พัฒนาโปรแรมร้านอาหารในส่วนงาน...</td>
																				<td>25 ก.ค. 2014</td>
																			</tr>
																			<tr>
																				<td>2</td>
																				<td>Table cell</td>
																				<td>26 ก.ค. 2014</td>

																			</tr>
																			<tr>
																				<td>3</td>
																				<td>Table cell</td>
																				<td>27 ก.ค. 2014</td>
																			</tr>
																		</tbody>
																	</table>
																</div>
															</div>

														</div>

													</div>

													<!-- tab 2 -->
													<div class="tab-pane fade" id="taskPendingTab">
														<div class="row">
															<div class="col-md-12">
																<div class="table-responsive">
																	<table class="table table-bordered">
																		<thead>
																			<tr>
																				<th style="width: 5px;">ลำดับ</th>
																				<th>ชื่องาน</th>
																				<th style="width: 150px;">ระยะเวลาทำงาน</th>
																			</tr>
																		</thead>
																		<tbody>
																			<tr>
																				<td>1</td>
																				<td>พัฒนาโปรแรมร้านอาหารในส่วนงาน...</td>
																				<td>25 ก.ค. - 10 ส.ค. 2014</td>
																			</tr>
																		</tbody>
																	</table>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="tab-pane fade" id="JobTab">

							<div class="row">
								<div class="col-md-12 mb15">
									<h2>งานของฉัน</h2>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12">
									<div class="boxFocus color1 text-center mb15">
										<div class="row">
											<div class="col-md-6">คุณสามารถเลือกมุมมองของงานที่คุณต้องการได้</div>
											<div class="col-md-3">
												<button type="button"
													class="btn btn-labeled btn-success font4">
													<span class="btn-label"><i class="icon-briefcase"></i></span>มุมมองฟรีแลนซ์
												</button>
											</div>
											<div class="col-md-3">
												<button type="button"
													class="btn btn-labeled btn-success font4">
													<span class="btn-label"><i class="icon-edit"></i></span>มุมมองผู้ว่าจ้าง
												</button>
											</div>
										</div>

									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12">มุมมองด้านฟรีแลนซ์</div>
								<div class="col-md-12">
									<ul class="nav nav-tabs" id="myTab">
										<li class="active"><a href="#taskMyRequestTab"
											data-toggle="tab">งานที่ทำการร้องขอ <span class="badge">42</span>
										</a></li>
										<li class=""><a href="#taskMyEmploymentTab"
											data-toggle="tab">งานที่ถูกว่าจ้าง <span class="badge">42</span>
										</a></li>
										<li class=""><a href="#taskMyPendingTab"
											data-toggle="tab">งานที่กำลังดำเนินการ <span
												class="badge">42</span>
										</a></li>
										<li class=""><a href="#taskMySuccessTab"
											data-toggle="tab">งานที่เสร็จสมบูรณ์ <span class="badge">42</span>
										</a></li>
										<li class=""><a href="#taskMyCancelTab" data-toggle="tab">งานที่ถูกยกเลิก
												<span class="badge">42</span>
										</a></li>
									</ul>

									<div class="tab-content">
										<!-- tab 1 Request -->
										<div class="tab-pane fade active in" id="taskMyRequestTab">
											<div class="row">
												<div class="col-md-12">
													<div class="alert alert-info pb05 pt05" role="alert">
														<p>
															<b>ชี้แจง :</b> การแสดงรายละเอียดของงานจะแสดงตารางตาม <b>สถานะการร้องขอ</b>
															ในปัจจุบัน
														</p>
													</div>
												</div>
												<div class="col-md-12 mb05">
													<h3>
														<span class="label label-info"><b>สถานะ</b></span>
														กำลังดำเนินการร้องของาน
													</h3>
												</div>
												<div class="col-md-12 mb05">
													<div class="table-responsive">
														<table class="table table-bordered">
															<thead>
																<tr>
																	<th style="width: 5px; text-align: center;">ลำดับ</th>
																	<th>ชื่องาน</th>
																	<th style="width: 145px; text-align: center;">วันที่ทำการร้องขอ</th>
																	<th style="width: 150px; text-align: center;">ยกเลิกการร้องขอ</th>
																</tr>
															</thead>
															<tbody>
																<tr>
																	<td>1</td>
																	<td>พัฒนาโปรแรมร้านอาหารในส่วนงาน...</td>
																	<td>25 ก.ค.2014 10:00 น.</td>
																	<td align="center"><button type="button"
																			class="btn btn-warning btn-xs">
																			<span class="fontHeader4"><i
																				class="icon-cancel iconSmall"></i>
																				ยกเลิกการร้องของาน</span>
																		</button></td>
																</tr>
															</tbody>
														</table>
													</div>
												</div>
												<div class="col-md-12 mb05">
													<h3>
														<span class="label label-info"><b>สถานะ</b></span>
														ได้รับการตอบรับการร้องขอ (กรุณากดปุ่ม <b>"ยืนยัน"</b>
														เพื่อตอบยืนว่าจะทำงานนี้ หรือ กดปุ่ม <b>"ปฏิเสธ"</b>
														เพื่อไม่ทำงานนี้)
													</h3>
												</div>
												<div class="col-md-12">
													<div class="table-responsive">
														<table class="table table-bordered">
															<thead>
																<tr>
																	<th style="width: 5px; text-align: center;">ลำดับ</th>
																	<th>ชื่องาน</th>
																	<th style="width: 145px; text-align: center;">วันที่ทำการร้องขอ</th>
																	<th style="width: 145px; text-align: center;">วันที่ถูกตอบรับงาน</th>
																	<th style="width: 150px; text-align: center;">ยืนยันการรับงาน</th>
																</tr>
															</thead>
															<tbody>
																<tr>
																	<td>1</td>
																	<td>พัฒนาโปรแรมร้านอาหารในส่วนงาน...</td>
																	<td>25 ก.ค.2014 10:00 น.</td>
																	<td>25 ก.ค.2014 10:00 น.</td>
																	<td align="center"><button type="button"
																			class="btn btn-success btn-xs">
																			<span class="fontHeader4"><i
																				class="icon-ok iconSmall"></i> ยืนยัน</span>
																		</button>
																		<button type="button" class="btn btn-danger btn-xs">
																			<span class="fontHeader4"><i
																				class="icon-ok iconSmall"></i> ปฏิเสธ</span>
																		</button></td>
																</tr>
															</tbody>
														</table>
													</div>
												</div>
												<div class="col-md-12 mb05">
													<h3>
														<span class="label label-info"><b>สถานะ</b></span>
														ปฏิเสธการร้องของาน
													</h3>
												</div>
												<div class="col-md-12">
													<div class="table-responsive">
														<table class="table table-bordered">
															<thead>
																<tr>
																	<th style="width: 5px; text-align: center;">ลำดับ</th>
																	<th>ชื่องาน</th>
																	<th style="width: 145px; text-align: center;">วันที่ทำการร้องขอ</th>
																	<th style="width: 145px; text-align: center;">วันที่ตอบกลับ</th>
																	<th style="width: 150px; text-align: center;">ลบการร้องขอ</th>
																</tr>
															</thead>
															<tbody>
																<tr>
																	<td>1</td>
																	<td>พัฒนาโปรแรมร้านอาหารในส่วนงาน...</td>
																	<td>25 ก.ค.2014 10:00 น.</td>
																	<td>25 ก.ค.2014 10:00 น.</td>
																	<td align="center"><button type="button"
																			class="btn btn-danger btn-xs">
																			<span class="fontHeader4"><i
																				class="glyphicon glyphicon-trash iconSmall"></i>
																				ลบการร้องขอ</span>
																		</button></td>
																</tr>
															</tbody>
														</table>
													</div>
												</div>
											</div>
										</div>

										<!-- tab 2 Employment -->
										<div class="tab-pane fade" id="taskMyEmploymentTab">
											<div class="row">
												<div class="col-md-12">
													<div class="table-responsive">
														<table class="table table-bordered">
															<thead>
																<tr>
																	<th style="width: 5px;">ลำดับ</th>
																	<th>ชื่องาน</th>
																	<th style="width: 145px;">วันที่ฉันถูกว่าจ้าง</th>
																	<th style="width: 145px;">ผลการตอบรับงาน</th>
																</tr>
															</thead>
															<tbody>
																<tr>
																	<td>1</td>
																	<td>พัฒนาโปรแรมร้านอาหารในส่วนงาน...</td>
																	<td>25 ก.ค. 2014 10:00 น.</td>
																	<td align="center"><button type="button"
																			class="btn btn-success btn-xs">
																			<span class="fontHeader4"><i
																				class="icon-ok iconSmall"></i> ยืนยัน</span>
																		</button>
																		<button type="button" class="btn btn-danger btn-xs">
																			<span class="fontHeader4"><i
																				class="glyphicon glyphicon-trash iconSmall"></i>
																				ปฏิเสธ</span>
																		</button></td>
																</tr>
																<tr>
																	<td>2</td>
																	<td>Table cell</td>
																	<td>25 ก.ค. 2014 10:00 น.</td>
																	<td align="center"><button type="button"
																			class="btn btn-success btn-xs">
																			<span class="fontHeader4"><i
																				class="icon-ok iconSmall"></i> ยืนยัน</span>
																		</button>
																		<button type="button" class="btn btn-danger btn-xs">
																			<span class="fontHeader4"><i
																				class="glyphicon glyphicon-trash iconSmall"></i>
																				ปฏิเสธ</span>
																		</button></td>


																</tr>
																<tr>
																	<td>3</td>
																	<td>Table cell</td>
																	<td>25 ก.ค. 2014 10:00 น.</td>
																	<td align="center"><button type="button"
																			class="btn btn-success btn-xs">
																			<span class="fontHeader4"><i
																				class="icon-ok iconSmall"></i> ยืนยัน</span>
																		</button>
																		<button type="button" class="btn btn-danger btn-xs">
																			<span class="fontHeader4"><i
																				class="glyphicon glyphicon-trash iconSmall"></i>
																				ปฏิเสธ</span>
																		</button></td>
																</tr>
															</tbody>
														</table>
													</div>
												</div>

											</div>

										</div>
										<!-- tab 3 Pending -->
										<div class="tab-pane fade" id="taskMyPendingTab">
											<div class="row">
												<div class="col-md-12">
													<div class="table-responsive">
														<table class="table table-bordered">
															<thead>
																<tr>
																	<th style="width: 5px;">ลำดับ</th>
																	<th>ชื่องาน</th>
																	<th style="width: 150px;">วันที่เริ่มรับทำงาน</th>
																	<th style="width: 150px;">ระยะเวลาทำงาน</th>
																	<th style="width: 110px;">ยกเลิกงาน</th>
																</tr>
															</thead>
															<tbody>
																<tr>
																	<td>1</td>
																	<td>พัฒนาโปรแรมร้านอาหารในส่วนงาน...</td>
																	<td>25 ก.ค. - 10 ส.ค. 2014</td>
																	<td>10 ส.ค. 2014 13:00 น.</td>
																	<td align="center"><button type="button"
																			class="btn btn-warning btn-xs">
																			<span class="fontHeader4"><i
																				class="icon-cancel iconSmall"></i> ยกเลิก</span>
																		</button></td>

																</tr>
															</tbody>
														</table>
													</div>
												</div>
											</div>
										</div>

										<!-- tab 4 Success -->
										<div class="tab-pane fade" id="taskMySuccessTab">
											<div class="row">
												<div class="col-md-12">
													<div class="table-responsive">
														<table class="table table-bordered">
															<thead>
																<tr>
																	<th style="width: 5px;">ลำดับ</th>
																	<th>ชื่องาน</th>
																	<th style="width: 150px;">วันที่เริ่มทำงาน</th>
																	<th style="width: 150px;">วันที่สิ้นสุดทำงาน</th>
																</tr>
															</thead>
															<tbody>
																<tr>
																	<td>1</td>
																	<td>พัฒนาโปรแรมร้านอาหารในส่วนงาน...</td>
																	<td>25 ก.ค. 2014 20:00 น.</td>
																	<td>25 ก.ค. 2014 24:00 น.</td>
																</tr>
																<tr>
																	<td>2</td>
																	<td>พัฒนาโปรแรมร้านอาหารในส่วนงาน...</td>
																	<td>25 ก.ค. 2014 20:00 น.</td>
																	<td>25 ก.ค. 2014 24:00 น.</td>
																</tr>
																<tr>
																	<td>3</td>
																	<td>พัฒนาโปรแรมร้านอาหารในส่วนงาน...</td>
																	<td>25 ก.ค. 2014 20:00 น.</td>
																	<td>25 ก.ค. 2014 24:00 น.</td>
																</tr>
																<tr>
																	<td>4</td>
																	<td>พัฒนาโปรแรมร้านอาหารในส่วนงาน...</td>
																	<td>25 ก.ค. 2014 20:00 น.</td>
																	<td>25 ก.ค. 2014 24:00 น.</td>
																</tr>
																<tr>
																	<td>5</td>
																	<td>พัฒนาโปรแรมร้านอาหารในส่วนงาน...</td>
																	<td>25 ก.ค. 2014 20:00 น.</td>
																	<td>25 ก.ค. 2014 24:00 น.</td>
																</tr>
																<tr>
																	<td>6</td>
																	<td>พัฒนาโปรแรมร้านอาหารในส่วนงาน...</td>
																	<td>25 ก.ค. 2014 20:00 น.</td>
																	<td>25 ก.ค. 2014 24:00 น.</td>
																</tr>
															</tbody>
														</table>
													</div>
												</div>

											</div>

										</div>

										<!-- tab 5 Cancel -->
										<div class="tab-pane fade" id="taskMyCancelTab">
											<div class="row">
												<div class="col-md-12">
													<div class="table-responsive">
														<table class="table table-bordered">
															<thead>
																<tr>
																	<th style="width: 5px;">ลำดับ</th>
																	<th>ชื่องาน</th>
																	<th style="width: 150px;">วันที่เริ่มทำงาน</th>
																	<th style="width: 150px;">วันที่ทำการยกเลิก</th>
																</tr>
															</thead>
															<tbody>
																<tr>
																	<td>1</td>
																	<td>พัฒนาโปรแรมร้านอาหารในส่วนงาน...</td>
																	<td>25 ก.ค. 2014 20:00 น.</td>
																	<td>25 ก.ค. 2014 24:00 น.</td>
																</tr>
																<tr>
																	<td>2</td>
																	<td>พัฒนาโปรแรมร้านอาหารในส่วนงาน...</td>
																	<td>25 ก.ค. 2014 20:00 น.</td>
																	<td>25 ก.ค. 2014 24:00 น.</td>
																</tr>
																<tr>
																	<td>3</td>
																	<td>พัฒนาโปรแรมร้านอาหารในส่วนงาน...</td>
																	<td>25 ก.ค. 2014 20:00 น.</td>
																	<td>25 ก.ค. 2014 24:00 น.</td>
																</tr>
																<tr>
																	<td>4</td>
																	<td>พัฒนาโปรแรมร้านอาหารในส่วนงาน...</td>
																	<td>25 ก.ค. 2014 20:00 น.</td>
																	<td>25 ก.ค. 2014 24:00 น.</td>
																</tr>
																<tr>
																	<td>5</td>
																	<td>พัฒนาโปรแรมร้านอาหารในส่วนงาน...</td>
																	<td>25 ก.ค. 2014 20:00 น.</td>
																	<td>25 ก.ค. 2014 24:00 น.</td>
																</tr>
																<tr>
																	<td>6</td>
																	<td>พัฒนาโปรแรมร้านอาหารในส่วนงาน...</td>
																	<td>25 ก.ค. 2014 20:00 น.</td>
																	<td>25 ก.ค. 2014 24:00 น.</td>
																</tr>
															</tbody>
														</table>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12">
									<hr class="lineLines">
								</div>
							</div>
							<div class="row">
								<div class="col-md-12">
									<b>ผลสรุปงานทั้งหมดของฉัน</b>
								</div>
							</div>
							<div class="row mt15">
								<div class="col-md-12 col-xs-6 table-responsive">
									<center>
										<canvas id="canvasAllJob" height="450px" width="800"></canvas>
									</center>
								</div>

							</div>

						</div>

						<div class="tab-pane fade" id="activityTab">
							<div class="row mb15">
								<div class="col-md-12">
									<h2>กิจกรรมของฉัน</h2>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12">
									<div class="boxFocus color1 text-center mb05">
										<div class="row">
											<div class="col-md-3">
												<p>
													<b>ระดับความสามารถ</b>
												</p>
											</div>
											<div class="col-md-6">
												<div class="processComment progress">
													<div
														class="progress-bar progress-bar-info progress-bar-striped"
														role="progressbar" aria-valuenow="60" aria-valuemin="0"
														aria-valuemax="100" style="width: 60%;"></div>
												</div>
											</div>
											<div class="col-md-3">ระดับ 2 (53 xp / 100 xp)</div>
										</div>

									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12 mt15 mb05">
									<b>กิจกรรมเพิ่มความสามารถ</b>
								</div>

								<div class="col-md-6 mt05">
									<div class="media">
										<a class="pull-left" href="#"> <img class="media-object"
											data-src="holder.js/64x64" alt="64x64"
											src=""
											style="width: 41px; height: 41px;">
										</a>
										<div class="media-body">Cras sit amet nibh libero, in
											gravida nulla. Nulla vel metus scelerisque ante sollicitudin
											commodo. Cras purus odio, vestibulum in vulputate at, tempus
											viverra turpis. Fusce</div>
									</div>
								</div>
								<div class="col-md-6 mt05">
									<div class="media">
										<a class="pull-left" href="#"> <img class="media-object"
											data-src="holder.js/64x64" alt="64x64"
											src=""
											style="width: 41px; height: 41px;">
										</a>
										<div class="media-body">Cras sit amet nibh libero, in
											gravida nulla. Nulla vel metus scelerisque ante sollicitudin
											commodo. Cras purus odio, vestibulum in vulputate at, tempus
											viverra turpis. Fusce</div>
									</div>
								</div>
								<div class="col-md-6 mt05">
									<div class="media">
										<a class="pull-left" href="#"> <img class="media-object"
											data-src="holder.js/64x64" alt="64x64"
											src=""
											style="width: 41px; height: 41px;">
										</a>
										<div class="media-body">Cras sit amet nibh libero, in
											gravida nulla. Nulla vel metus scelerisque ante sollicitudin
											commodo. Cras purus odio, vestibulum in vulputate at, tempus
											viverra turpis. Fusce</div>
									</div>
								</div>
								<div class="col-md-6 mt05">
									<div class="media">
										<a class="pull-left" href="#"> <img class="media-object"
											data-src="holder.js/64x64" alt="64x64"
											src=""
											style="width: 41px; height: 41px;">
										</a>
										<div class="media-body">Cras sit amet nibh libero, in
											gravida nulla. Nulla vel metus scelerisque ante sollicitudin
											commodo. Cras purus odio, vestibulum in vulputate at, tempus
											viverra turpis. Fusce</div>
									</div>
								</div>
								<div class="col-md-6 mt05">
									<div class="media">
										<a class="pull-left" href="#"> <img class="media-object"
											data-src="holder.js/64x64" alt="64x64"
											src=""
											style="width: 41px; height: 41px;">
										</a>
										<div class="media-body">Cras sit amet nibh libero, in
											gravida nulla. Nulla vel metus scelerisque ante sollicitudin
											commodo. Cras purus odio, vestibulum in vulputate at, tempus
											viverra turpis. Fusce</div>
									</div>
								</div>
								<div class="col-md-6 mt05">
									<div class="media">
										<a class="pull-left" href="#"> <img class="media-object"
											data-src="holder.js/64x64" alt="64x64"
											src=""
											style="width: 41px; height: 41px;">
										</a>
										<div class="media-body">Cras sit amet nibh libero, in
											gravida nulla. Nulla vel metus scelerisque ante sollicitudin
											commodo. Cras purus odio, vestibulum in vulputate at, tempus
											viverra turpis. Fusce</div>
									</div>
								</div>
								<div class="col-md-6 mt05">
									<div class="media">
										<a class="pull-left" href="#"> <img class="media-object"
											data-src="holder.js/64x64" alt="64x64"
											src=""
											style="width: 41px; height: 41px;">
										</a>
										<div class="media-body">Cras sit amet nibh libero, in
											gravida nulla. Nulla vel metus scelerisque ante sollicitudin
											commodo. Cras purus odio, vestibulum in vulputate at, tempus
											viverra turpis. Fusce</div>
									</div>
								</div>
								<div class="col-md-6 mt05">
									<div class="media">
										<a class="pull-left" href="#"> <img class="media-object"
											data-src="holder.js/64x64" alt="64x64"
											src=""
											style="width: 41px; height: 41px;">
										</a>
										<div class="media-body">Cras sit amet nibh libero, in
											gravida nulla. Nulla vel metus scelerisque ante sollicitudin
											commodo. Cras purus odio, vestibulum in vulputate at, tempus
											viverra turpis. Fusce</div>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12 mt15 mb05">
									<b>กิจกรรมรับเหรียญฟรี</b>
								</div>

								<div class="col-md-6 mt05">
									<div class="media">
										<a class="pull-left" href="#"> <img class="media-object"
											data-src="holder.js/64x64" alt="64x64"
											src=""
											style="width: 41px; height: 41px;">
										</a>
										<div class="media-body">Cras sit amet nibh libero, in
											gravida nulla. Nulla vel metus scelerisque ante sollicitudin
											commodo. Cras purus odio, vestibulum in vulputate at, tempus
											viverra turpis. Fusce</div>
									</div>
								</div>
								<div class="col-md-6 mt05">
									<div class="media">
										<a class="pull-left" href="#"> <img class="media-object"
											data-src="holder.js/64x64" alt="64x64"
											src=""
											style="width: 41px; height: 41px;">
										</a>
										<div class="media-body">Cras sit amet nibh libero, in
											gravida nulla. Nulla vel metus scelerisque ante sollicitudin
											commodo. Cras purus odio, vestibulum in vulputate at, tempus
											viverra turpis. Fusce</div>
									</div>
								</div>
								<div class="col-md-6 mt05">
									<div class="media">
										<a class="pull-left" href="#"> <img class="media-object"
											data-src="holder.js/64x64" alt="64x64"
											src=""
											style="width: 41px; height: 41px;">
										</a>
										<div class="media-body">Cras sit amet nibh libero, in
											gravida nulla. Nulla vel metus scelerisque ante sollicitudin
											commodo. Cras purus odio, vestibulum in vulputate at, tempus
											viverra turpis. Fusce</div>
									</div>
								</div>
								<div class="col-md-6 mt05">
									<div class="media">
										<a class="pull-left" href="#"> <img class="media-object"
											data-src="holder.js/64x64" alt="64x64"
											src=""
											style="width: 41px; height: 41px;">
										</a>
										<div class="media-body">Cras sit amet nibh libero, in
											gravida nulla. Nulla vel metus scelerisque ante sollicitudin
											commodo. Cras purus odio, vestibulum in vulputate at, tempus
											viverra turpis. Fusce</div>
									</div>
								</div>
								<div class="col-md-6 mt05">
									<div class="media">
										<a class="pull-left" href="#"> <img class="media-object"
											data-src="holder.js/64x64" alt="64x64"
											src=""
											style="width: 41px; height: 41px;">
										</a>
										<div class="media-body">Cras sit amet nibh libero, in
											gravida nulla. Nulla vel metus scelerisque ante sollicitudin
											commodo. Cras purus odio, vestibulum in vulputate at, tempus
											viverra turpis. Fusce</div>
									</div>
								</div>
								<div class="col-md-6 mt05">
									<div class="media">
										<a class="pull-left" href="#"> <img class="media-object"
											data-src="holder.js/64x64" alt="64x64"
											src=""
											style="width: 41px; height: 41px;">
										</a>
										<div class="media-body">Cras sit amet nibh libero, in
											gravida nulla. Nulla vel metus scelerisque ante sollicitudin
											commodo. Cras purus odio, vestibulum in vulputate at, tempus
											viverra turpis. Fusce</div>
									</div>
								</div>
								<div class="col-md-6 mt05">
									<div class="media">
										<a class="pull-left" href="#"> <img class="media-object"
											data-src="holder.js/64x64" alt="64x64"
											src=""
											style="width: 41px; height: 41px;">
										</a>
										<div class="media-body">Cras sit amet nibh libero, in
											gravida nulla. Nulla vel metus scelerisque ante sollicitudin
											commodo. Cras purus odio, vestibulum in vulputate at, tempus
											viverra turpis. Fusce</div>
									</div>
								</div>
								<div class="col-md-6 mt05">
									<div class="media">
										<a class="pull-left" href="#"> <img class="media-object"
											data-src="holder.js/64x64" alt="64x64"
											src=""
											style="width: 41px; height: 41px;">
										</a>
										<div class="media-body">Cras sit amet nibh libero, in
											gravida nulla. Nulla vel metus scelerisque ante sollicitudin
											commodo. Cras purus odio, vestibulum in vulputate at, tempus
											viverra turpis. Fusce</div>
									</div>
								</div>
							</div>
						</div>

						<div class="tab-pane fade" id="accountTab">
							<div class="row">
								<div class="col-md-10">
									<h2>บัญชีการเงินของฉัน</h2>
								</div>
								<div class="col-md-2">
									<button class="btn btn-success btn-block ">
										<div>
											<span class="font3"> ดูโปรไฟล์ฉัน </span>
										</div>
									</button>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12">
									<div class="boxFocus color1 form-inline mt05">
										<div class="row mb05">
											<div class="col-md-12">
												<span class="font3 "><b>ค้นหารายการบัญชีของฉัน</b></span>
											</div>
										</div>
										<div class="row">
											<div class="col-md-5">

												<div class="radio">
													<label class="font4"> <input type="radio"
														name="searchAccountType"> ค้าหารายการทั้งหมด
													</label>
												</div>

											</div>
											<div class="col-md-7">
												<div class="radio">
													<label class="font4"> <input type="radio"
														name="searchAccountType"> ค้าหาวันที่ <input
														type="date" class="form-control"> ถึง <input
														type="date" class="form-control">
													</label>
												</div>


											</div>
										</div>
										<div class="row mt05">
											<div class="col-md-5">

												<div class="radio">
													<label class="font4"><input type="radio"
														name="searchAccountType"> ค้าหารายการของวันนี้
														(วันที่ 2 สิงหาคม 2556) </label>
												</div>

											</div>
											<div class="col-md-7">
												<div class="radio">
													<label class="font4"><input type="radio"
														name="searchAccountType"> ค้าหารายการประจำเดือน <select
														class="form-control">
															<option value="">มกราคม</option>
													</select> </label>
												</div>

											</div>
										</div>
										<div class="row">
											<div class="col-md-12" align="center">
												<button type="button" class="btn btn-success btn-xs">
													<span class="fontHeader4"><i
														class="glyphicon glyphicon-search iconSmall"></i>
														ค้นหารายการบัญชีสะสม</span>
												</button>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12">
									<hr class="lineLines">
								</div>
							</div>
							<div class="row">
								<div class="col-md-12">
									<ul class="nav nav-tabs" role="tablist">
										<li class="active in"><a href="#summarize" role="tab"
											data-toggle="tab">ภาพรวมบัญชี</a></li>
										<li class=""><a href="#transactions" role="tab"
											data-toggle="tab">รายการธุรกรรม</a></li>
										<li class=""><a href="#income" role="tab"
											data-toggle="tab">บัญชีรายรับ</a></li>
										<li class=""><a href="#outlay" role="tab"
											data-toggle="tab">บัญชีรายจ่าย</a></li>
										<li class=""><a href="#transfer-income" role="tab"
											data-toggle="tab">ประวัติการโอนเข้า</a></li>
										<li class=""><a href="#transfer-outlay" role="tab"
											data-toggle="tab">ประวัติการโอนออก</a></li>
									</ul>
									<div class="tab-content">
										<div class="tab-pane fade active in" id="summarize">
											<div class="ctaBox">
												<div class="row">
													<div class="col-md-6">
														<h2>สรุป</h2>
														<table class="table table-striped table-hover">
															<thead>
																<tr>
																	<th>รายการ</th>
																	<th>รายรับ (เหรียญ)</th>
																	<th>รายจ่าย (เหรียญ)</th>
																</tr>
															</thead>
															<tbody>
																<tr>
																	<td>ยอดการฝากเงิน</td>
																	<td>1,000,000</td>
																	<td></td>
																</tr>
																<tr>
																	<td>ยอดการโอนเข้า</td>
																	<td>1,000,000</td>
																	<td></td>
																</tr>
																<tr>
																	<td>ค่าใช้จ่ายด้านการประกาศงาน</td>
																	<td></td>
																	<td>1,000,000</td>
																</tr>
																<tr>
																	<td>ค่าใช้จ่ายด้านการเสนอบริการ</td>
																	<td></td>
																	<td>1,000,000</td>
																</tr>
																<tr>
																	<td>ค่าใช้จ่ายด้านการร้องขอข้อมูล</td>
																	<td></td>
																	<td>1,000,000</td>
																</tr>
																<tr>
																	<td>ยอดการโอนออก</td>
																	<td></td>
																	<td>1,000,000</td>
																</tr>
															</tbody>
															<tfoot>
																<tr>
																	<th>รวม</th>
																	<th>1,000,000</th>
																	<th>1,000,000</th>
																</tr>
																<tr>
																	<th>เหรียญคงเหลือในบัญชี</th>
																	<th></th>
																	<th colspan="2"><u>1,000,000</u></th>
																</tr>
															</tfoot>
														</table>
													</div>
													<div class="col-md-6"
														style="border-left: thin; border-left-style: dotted; border-left-color: #ddd">
														<div class="row">
															<div class="col-md-12">
																<h2>ประเภทค่าใช้จ่าย</h2>
															</div>
														</div>
														<div class="row mt05">
															<div class="col-md-12">
																<div id="canvas-holder">
																	<center>
																		<canvas id="chart-area" width="200" height="200"></canvas>
																	</center>
																</div>
															</div>
														</div>
														<div class="row">
															<div class="col-md-12">
																<div class="boxFocus color1 form-inline mt05">

																	<div class="row">
																		<div class="col-md-1 col-sm-1 col-xs-1">
																			<canvas id="myCanvas" width="12" height="12"
																				style="border: 1px solid #000000; background-color: #521B04; border-radius: 3px;">
																			</canvas>
																		</div>
																		<div class="col-md-8 col-sm-8 col-xs-8">ค่าใช้จ่ายด้านการประกาศงาน</div>
																		<div class="col-md-3 col-sm-3 col-xs-3">4 %</div>
																	</div>
																	<div class="row">
																		<div class="col-md-1 col-sm-1 col-xs-1">
																			<canvas id="myCanvas" width="12" height="12"
																				style="border: 1px solid #000000; background-color: #FF9500; border-radius: 3px;">
																			</canvas>
																		</div>
																		<div class="col-md-8 col-sm-8 col-xs-8">ค่าใช้จ่ายด้านการเสนอบริการ</div>
																		<div class="col-md-3 col-sm-3 col-xs-3">34 %</div>
																	</div>
																	<div class="row">
																		<div class="col-md-1 col-sm-1 col-xs-1">
																			<canvas id="myCanvas" width="12" height="12"
																				style="border: 1px solid #000000; background-color: #E82200; border-radius: 3px;">
																			</canvas>
																		</div>
																		<div class="col-md-8 col-sm-8 col-xs-8">ค่าใช้จ่ายด้านการร้องขอข้อมูล</div>
																		<div class="col-md-3 col-sm-3 col-xs-3">69 %</div>
																	</div>




																</div>
															</div>
														</div>

													</div>
												</div>
												<hr class="lineLines">
												<div class="row">
													<div class="col-md-6">
														<h2>เงินฝาก</h2>
														<ul>
															<li>ยอดเงินฝากทั้งหมด จำนวน 10,000 บาท</li>
															<li>ยอดเงินฝากล่าสุด จำนวน 1,000 บาท<br> <i>(วันที่
																	9 มกราคม 2557 เวลา 20.00 น.)</i></li>
														</ul>
													</div>
													<div class="col-md-6">
														<h2>การโอน</h2>
														<div class="row">
															<div class="col-md-6">
																<ul>
																	<li>ยอดการโอนเข้าทั้งหมด<br>จำนวน 10,000 บาท
																	</li>
																	<li>ยอดการโอนเข้าล่าสุด<br>จำนวน 10,000 บาท<br>
																		<i>(วันที่ 9 มกราคม 2557 เวลา 20.00 น.)</i></li>
																</ul>
															</div>
															<div class="col-md-6">
																<ul>
																	<li>ยอดการโอนออกทั้งหมด<br>จำนวน 10,000 บาท
																	</li>
																	<li>ยอดการโอนออกล่าสุด<br>จำนวน 10,000 บาท<br>
																		<i>(วันที่ 9 มกราคม 2557 เวลา 20.00 น.)</i></li>
																</ul>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="tab-pane fade" id="transactions">
											<div class="row">
												<div class="col-md-12">
													<div class="ctaBox">
														<div class="row">
															<div class="col-sm-2">
																<label>จำนวนรายการ</label>
															</div>
															<div class="col-sm-3">
																<div class="form-group">
																	<select class="form-control">
																		<option>10</option>
																		<option>20</option>
																		<option>30</option>
																		<option>50</option>
																		<option>ทั้งหมด</option>
																	</select>
																</div>
															</div>
															<div class="col-sm-7">แสดง 1 ถึง 20 จาก 2,779
																รายการ</div>
														</div>
														<hr>
														<div class="row">
															<div class="col-md-12" align="right">
																<ul class="pagination">
																	<li class="disabled"><a href="#">«</a></li>
																	<li class="active"><a href="#">1 <span
																			class="sr-only">(current)</span></a></li>
																	<li><a href="#">2</a></li>
																	<li><a href="#">3</a></li>
																	<li><a href="#">4</a></li>
																	<li><a href="#">5</a></li>
																	<li><a href="#">»</a></li>
																</ul>
															</div>
														</div>
														<div class="row">
															<div class="col-md-12">
																<table class="table table-hover">
																	<thead>
																		<tr>
																			<th>ลำดับ</th>
																			<th>เวลา</th>
																			<th>หมวด</th>
																			<th>รายการ</th>
																			<th>จำนวน</th>
																			<th>คงเหลือ</th>
																		</tr>
																	</thead>
																	<tbody>
																		<tr>
																			<td>1</td>
																			<td>1/01/2557:19.30</td>
																			<td>ร้องขอข้อมูล</td>
																			<td>ร้องขอข้อมูลประวัติ</td>
																			<td>-10</td>
																			<td>90</td>
																		</tr>
																		<tr>
																			<td>2</td>
																			<td>1/01/2557:19.30</td>
																			<td>ร้องขอข้อมูล</td>
																			<td>ร้องขอข้อมูลประวัติ</td>
																			<td>-10</td>
																			<td>90</td>
																		</tr>
																		<tr>
																			<td>3</td>
																			<td>1/01/2557:19.30</td>
																			<td>ร้องขอข้อมูล</td>
																			<td>ร้องขอข้อมูลประวัติ</td>
																			<td>-10</td>
																			<td>90</td>
																		</tr>
																	</tbody>
																</table>
															</div>
														</div>
														<div class="row">
															<div class="col-md-12" align="right">
																<ul class="pagination">
																	<li class="disabled"><a href="#">«</a></li>
																	<li class="active"><a href="#">1 <span
																			class="sr-only">(current)</span></a></li>
																	<li><a href="#">2</a></li>
																	<li><a href="#">3</a></li>
																	<li><a href="#">4</a></li>
																	<li><a href="#">5</a></li>
																	<li><a href="#">»</a></li>
																</ul>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="tab-pane fade" id="income">
											<div class="row">
												<div class="col-md-12">
													<div class="ctaBox">
														<div class="row">
															<div class="col-sm-2">
																<label>จำนวนรายการ</label>
															</div>
															<div class="col-sm-3">
																<div class="form-group">
																	<select class="form-control">
																		<option>10</option>
																		<option>20</option>
																		<option>30</option>
																		<option>50</option>
																		<option>ทั้งหมด</option>
																	</select>
																</div>
															</div>
															<div class="col-sm-7">แสดง 1 ถึง 20 จาก 2,779
																รายการ</div>
														</div>
														<hr>
														<div class="row">
															<div class="col-md-12" align="right">
																<ul class="pagination">
																	<li class="disabled"><a href="#">«</a></li>
																	<li class="active"><a href="#">1 <span
																			class="sr-only">(current)</span></a></li>
																	<li><a href="#">2</a></li>
																	<li><a href="#">3</a></li>
																	<li><a href="#">4</a></li>
																	<li><a href="#">5</a></li>
																	<li><a href="#">»</a></li>
																</ul>
															</div>
														</div>
														<div class="row">
															<div class="col-md-12">
																<table class="table table-hover">
																	<thead>
																		<tr>
																			<th>ลำดับ</th>
																			<th>เวลา</th>
																			<th>หมวด</th>
																			<th>รายการ</th>
																			<th>จำนวน</th>
																		</tr>
																	</thead>
																	<tbody>
																		<tr>
																			<td>1</td>
																			<td>1/01/2557:19.30</td>
																			<td>ร้องขอข้อมูล</td>
																			<td>ร้องขอข้อมูลประวัติ</td>
																			<td>+10</td>
																		</tr>
																		<tr>
																			<td>2</td>
																			<td>1/01/2557:19.30</td>
																			<td>ร้องขอข้อมูล</td>
																			<td>ร้องขอข้อมูลประวัติ</td>
																			<td>+10</td>
																		</tr>
																		<tr>
																			<td>3</td>
																			<td>1/01/2557:19.30</td>
																			<td>ร้องขอข้อมูล</td>
																			<td>ร้องขอข้อมูลประวัติ</td>
																			<td>+10</td>
																		</tr>
																	</tbody>
																</table>
															</div>
														</div>
														<div class="row">
															<div class="col-md-12" align="right">
																<ul class="pagination">
																	<li class="disabled"><a href="#">«</a></li>
																	<li class="active"><a href="#">1 <span
																			class="sr-only">(current)</span></a></li>
																	<li><a href="#">2</a></li>
																	<li><a href="#">3</a></li>
																	<li><a href="#">4</a></li>
																	<li><a href="#">5</a></li>
																	<li><a href="#">»</a></li>
																</ul>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="tab-pane fade" id="outlay">
											<div class="row">
												<div class="col-md-12">
													<div class="ctaBox">
														<div class="row">
															<div class="col-sm-2">
																<label>จำนวนรายการ</label>
															</div>
															<div class="col-sm-3">
																<div class="form-group">
																	<select class="form-control">
																		<option>10</option>
																		<option>20</option>
																		<option>30</option>
																		<option>50</option>
																		<option>ทั้งหมด</option>
																	</select>
																</div>
															</div>
															<div class="col-sm-7">แสดง 1 ถึง 20 จาก 2,779
																รายการ</div>
														</div>
														<hr>
														<div class="row">
															<div class="col-md-12" align="right">
																<ul class="pagination">
																	<li class="disabled"><a href="#">«</a></li>
																	<li class="active"><a href="#">1 <span
																			class="sr-only">(current)</span></a></li>
																	<li><a href="#">2</a></li>
																	<li><a href="#">3</a></li>
																	<li><a href="#">4</a></li>
																	<li><a href="#">5</a></li>
																	<li><a href="#">»</a></li>
																</ul>
															</div>
														</div>
														<div class="row">
															<div class="col-md-12">
																<table class="table table-hover">
																	<thead>
																		<tr>
																			<th>ลำดับ</th>
																			<th>เวลา</th>
																			<th>หมวด</th>
																			<th>รายการ</th>
																			<th>จำนวน</th>
																		</tr>
																	</thead>
																	<tbody>
																		<tr>
																			<td>1</td>
																			<td>1/01/2557:19.30</td>
																			<td>ร้องขอข้อมูล</td>
																			<td>ร้องขอข้อมูลประวัติ</td>
																			<td>-10</td>
																		</tr>
																		<tr>
																			<td>2</td>
																			<td>1/01/2557:19.30</td>
																			<td>ร้องขอข้อมูล</td>
																			<td>ร้องขอข้อมูลประวัติ</td>
																			<td>-10</td>
																		</tr>
																		<tr>
																			<td>3</td>
																			<td>1/01/2557:19.30</td>
																			<td>ร้องขอข้อมูล</td>
																			<td>ร้องขอข้อมูลประวัติ</td>
																			<td>-10</td>
																		</tr>
																	</tbody>
																</table>
															</div>
														</div>
														<div class="row">
															<div class="col-md-12" align="right">
																<ul class="pagination">
																	<li class="disabled"><a href="#">«</a></li>
																	<li class="active"><a href="#">1 <span
																			class="sr-only">(current)</span></a></li>
																	<li><a href="#">2</a></li>
																	<li><a href="#">3</a></li>
																	<li><a href="#">4</a></li>
																	<li><a href="#">5</a></li>
																	<li><a href="#">»</a></li>
																</ul>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="tab-pane fade" id="outlay">
											<div class="row">
												<div class="col-md-12">
													<div class="ctaBox">
														<div class="row">
															<div class="col-sm-2">
																<label>จำนวนรายการ</label>
															</div>
															<div class="col-sm-3">
																<div class="form-group">
																	<select class="form-control">
																		<option>10</option>
																		<option>20</option>
																		<option>30</option>
																		<option>50</option>
																		<option>ทั้งหมด</option>
																	</select>
																</div>
															</div>
															<div class="col-sm-7">แสดง 1 ถึง 20 จาก 2,779
																รายการ</div>
														</div>
														<hr>
														<div class="row">
															<div class="col-md-12" align="right">
																<ul class="pagination">
																	<li class="disabled"><a href="#">«</a></li>
																	<li class="active"><a href="#">1 <span
																			class="sr-only">(current)</span></a></li>
																	<li><a href="#">2</a></li>
																	<li><a href="#">3</a></li>
																	<li><a href="#">4</a></li>
																	<li><a href="#">5</a></li>
																	<li><a href="#">»</a></li>
																</ul>
															</div>
														</div>
														<div class="row">
															<div class="col-md-12">
																<table class="table table-hover">
																	<thead>
																		<tr>
																			<th>ลำดับ</th>
																			<th>เวลา</th>
																			<th>หมวด</th>
																			<th>รายการ</th>
																			<th>จำนวน</th>
																		</tr>
																	</thead>
																	<tbody>
																		<tr>
																			<td>1</td>
																			<td>1/01/2557:19.30</td>
																			<td>ร้องขอข้อมูล</td>
																			<td>ร้องขอข้อมูลประวัติ</td>
																			<td>-10</td>
																		</tr>
																		<tr>
																			<td>2</td>
																			<td>1/01/2557:19.30</td>
																			<td>ร้องขอข้อมูล</td>
																			<td>ร้องขอข้อมูลประวัติ</td>
																			<td>-10</td>
																		</tr>
																		<tr>
																			<td>3</td>
																			<td>1/01/2557:19.30</td>
																			<td>ร้องขอข้อมูล</td>
																			<td>ร้องขอข้อมูลประวัติ</td>
																			<td>-10</td>
																		</tr>
																	</tbody>
																</table>
															</div>
														</div>
														<div class="row">
															<div class="col-md-12" align="right">
																<ul class="pagination">
																	<li class="disabled"><a href="#">«</a></li>
																	<li class="active"><a href="#">1 <span
																			class="sr-only">(current)</span></a></li>
																	<li><a href="#">2</a></li>
																	<li><a href="#">3</a></li>
																	<li><a href="#">4</a></li>
																	<li><a href="#">5</a></li>
																	<li><a href="#">»</a></li>
																</ul>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="tab-pane fade" id="transfer-income">
											<div class="row">
												<div class="col-md-12">
													<div class="ctaBox">
														<div class="row">
															<div class="col-sm-2">
																<label>จำนวนรายการ</label>
															</div>
															<div class="col-sm-3">
																<div class="form-group">
																	<select class="form-control">
																		<option>10</option>
																		<option>20</option>
																		<option>30</option>
																		<option>50</option>
																		<option>ทั้งหมด</option>
																	</select>
																</div>
															</div>
															<div class="col-sm-7">แสดง 1 ถึง 20 จาก 2,779
																รายการ</div>
														</div>
														<hr>
														<div class="row">
															<div class="col-md-12" align="right">
																<ul class="pagination">
																	<li class="disabled"><a href="#">«</a></li>
																	<li class="active"><a href="#">1 <span
																			class="sr-only">(current)</span></a></li>
																	<li><a href="#">2</a></li>
																	<li><a href="#">3</a></li>
																	<li><a href="#">4</a></li>
																	<li><a href="#">5</a></li>
																	<li><a href="#">»</a></li>
																</ul>
															</div>
														</div>
														<div class="row">
															<div class="col-md-12">
																<table class="table table-hover">
																	<thead>
																		<tr>
																			<th>ลำดับ</th>
																			<th>เวลา</th>
																			<th>ผู้โอนเข้ามา</th>
																			<th>จำนวน</th>
																			<th>หมายเหตุ</th>
																		</tr>
																	</thead>
																	<tbody>
																		<tr>
																			<td>1</td>
																			<td>1/01/2557:19.30</td>
																			<td><a>คุณทดสอบ</a></td>
																			<td>+10</td>
																			<td>ค่าบริการทำโลโก้</td>
																		</tr>
																		<tr>
																			<td>2</td>
																			<td>1/01/2557:19.30</td>
																			<td><a>คุณทดสอบ</a></td>
																			<td>+10</td>
																			<td>ค่าบริการทำโลโก้</td>
																		</tr>
																		<tr>
																			<td>3</td>
																			<td>1/01/2557:19.30</td>
																			<td><a>คุณทดสอบ</a></td>
																			<td>+10</td>
																			<td>ค่าบริการทำโลโก้</td>
																		</tr>
																	</tbody>
																</table>
															</div>
														</div>
														<div class="row">
															<div class="col-md-12" align="right">
																<ul class="pagination">
																	<li class="disabled"><a href="#">«</a></li>
																	<li class="active"><a href="#">1 <span
																			class="sr-only">(current)</span></a></li>
																	<li><a href="#">2</a></li>
																	<li><a href="#">3</a></li>
																	<li><a href="#">4</a></li>
																	<li><a href="#">5</a></li>
																	<li><a href="#">»</a></li>
																</ul>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="tab-pane fade " id="transfer-outlay">
											<div class="row">
												<div class="col-md-12">
													<div class="ctaBox">
														<div class="row">
															<div class="col-sm-2">
																<label>จำนวนรายการ</label>
															</div>
															<div class="col-sm-3">
																<div class="form-group">
																	<select class="form-control">
																		<option>10</option>
																		<option>20</option>
																		<option>30</option>
																		<option>50</option>
																		<option>ทั้งหมด</option>
																	</select>
																</div>
															</div>
															<div class="col-sm-7">แสดง 1 ถึง 20 จาก 2,779
																รายการ</div>
														</div>
														<hr>
														<div class="row">
															<div class="col-md-12" align="right">
																<ul class="pagination">
																	<li class="disabled"><a href="#">«</a></li>
																	<li class="active"><a href="#">1 <span
																			class="sr-only">(current)</span></a></li>
																	<li><a href="#">2</a></li>
																	<li><a href="#">3</a></li>
																	<li><a href="#">4</a></li>
																	<li><a href="#">5</a></li>
																	<li><a href="#">»</a></li>
																</ul>
															</div>
														</div>
														<div class="row">
															<div class="col-md-12">
																<table class="table table-hover">
																	<thead>
																		<tr>
																			<th>ลำดับ</th>
																			<th>เวลา</th>
																			<th>โอนไปยัง</th>
																			<th>จำนวน</th>
																			<th>หมายเหตุ</th>
																		</tr>
																	</thead>
																	<tbody>
																		<tr>
																			<td>1</td>
																			<td>1/01/2557:19.30</td>
																			<td><a>คุณทดสอบ</a></td>
																			<td>-10</td>
																			<td>ค่าบริการทำโลโก้</td>
																		</tr>
																		<tr>
																			<td>2</td>
																			<td>1/01/2557:19.30</td>
																			<td><a>คุณทดสอบ</a></td>
																			<td>-10</td>
																			<td>ค่าบริการทำโลโก้</td>
																		</tr>
																		<tr>
																			<td>3</td>
																			<td>1/01/2557:19.30</td>
																			<td><a>คุณทดสอบ</a></td>
																			<td>-10</td>
																			<td>ค่าบริการทำโลโก้</td>
																		</tr>
																	</tbody>
																</table>
															</div>
														</div>
														<div class="row">
															<div class="col-md-12" align="right">
																<ul class="pagination">
																	<li class="disabled"><a href="#">«</a></li>
																	<li class="active"><a href="#">1 <span
																			class="sr-only">(current)</span></a></li>
																	<li><a href="#">2</a></li>
																	<li><a href="#">3</a></li>
																	<li><a href="#">4</a></li>
																	<li><a href="#">5</a></li>
																	<li><a href="#">»</a></li>
																</ul>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>




						</div>
						<div class="tab-pane fade" id="inviteTab">d</div>








					</div>
				</div>
			</div>
		</div>
		<jsp:include page="core/template/FOOTER.jsp" />
		<!-- ======================================= content ======================================= -->
	</div>




	<!-- 	Script chart Account -->
	<script>
		var doughnutData = [ {
			value : 300,
			color : "#521B04",
			highlight : "rgba(82, 27, 4, 0.79)",
			label : "dddeกกก"
		}, {
			value : 50,
			color : "#FF9500",
			highlight : "rgba(255, 149, 0, 0.74)",
			label : "Green"
		}, {
			value : 100,
			color : "#E82200",
			highlight : "rgba(232, 34, 0, 0.79)",
			label : "Yellow"
		} ];
	</script>
	<!-- 	End Script chart Account -->

	<!-- 	Script chart All Job -->
	<script>
		var randomScalingFactor = function() {
			return Math.round(Math.random() * 100);
		};

		var barChartData = {
			labels : [ "January", "February", "March", "April", "May", "June",
					"July" ],
			datasets : [
					{
						fillColor : "rgba(220,220,220,0.5)",
						strokeColor : "rgba(220,220,220,0.8)",
						highlightFill : "rgba(220,220,220,0.75)",
						highlightStroke : "rgba(220,220,220,1)",
						data : [ randomScalingFactor(), randomScalingFactor(),
								randomScalingFactor(), randomScalingFactor(),
								randomScalingFactor(), randomScalingFactor(),
								randomScalingFactor() ]
					},
					{
						fillColor : "rgba(151,187,205,0.5)",
						strokeColor : "rgba(151,187,205,0.8)",
						highlightFill : "rgba(151,187,205,0.75)",
						highlightStroke : "rgba(151,187,205,1)",
						data : [ randomScalingFactor(), randomScalingFactor(),
								randomScalingFactor(), randomScalingFactor(),
								randomScalingFactor(), randomScalingFactor(),
								randomScalingFactor() ]
					} ]

		};
		window.onload = function() {
			var line_ctx = document.getElementById("canvasAllJob").getContext(
					"2d");
			new Chart(line_ctx).Bar(barChartData, {
				responsive : false,
				segmentShowStroke : true,
				segmentStrokeColor : "#fff",
				segmentStrokeWidth : 2,
				animationEasing : "easeOutBounce",
				animateRotate : true,
				animateScale : false,

			});
			var ctx = document.getElementById("chart-area").getContext("2d");
			new Chart(ctx).Doughnut(doughnutData, {
				responsive : false,
			});
		};
	</script>
	<!-- 	End script chart All Job -->

	<script src="custom/js/Chart.js"></script>

	<!-- global wrapper -->
	<!-- End Document 
	================================================== -->
</body>
</html>
